<script setup lang="ts">
import dayjs from 'dayjs';
import { ref } from 'vue';
import 'dayjs/locale/zh-cn';
import Phone from './Phone.vue';


defineProps<{
}>()

</script>

<template>
  		<div class="mac">		
        <div class="up"></div>			
        <div class="bottom"></div>
        <div class="front">
          <div class="light"></div>
          <div class="button">O</div>
          <div class="usb"></div>
          <div class="usb"></div>
          <div class="usb"></div>
        </div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
</template>

<style scoped>
.mac {
  --width:5em;
  --height:20em;
  --deep:15em;
  --colorFront:rgb(129, 129, 128);
  --colorBack:rgb(129, 129, 128);
  --colorLeft:rgb(129, 129, 128);
  --colorRight:rgb(129, 129, 128);
  --colorUp:rgb(129, 129, 128) ;
  --colorBottom:rgb(129, 129, 128);
  
  transform-style: preserve-3d;
  perspective:110em;
  transform: rotate3d(1, 0, 0, -10deg) rotate3d(0, 1, 0, -10deg);
  /* animation: rotate 3s linear infinite; */
    position: absolute;
    top:2.5em;
    transform-origin: 50% 50%;
    
  }
  @keyframes rotate {
      0% {        
          transform: rotate3d(1, 1, 1, 0deg);
      }
      100% {        
          transform: rotate3d(1, 1, 1, 360deg);
      }
  }
  .mac div{
    box-shadow: inset 0 0 2em 0.8em #00000050;
    border-radius: 1em;
  }
.mac .up {
  width: var(--width*1.8);
  height: var(--deep*1.8);
  background-color: var(--colorUp);
  position:absolute;
  transform: rotate3d(1, 0, 0, 90deg) translate3d(0,0,calc(var(--height) * -1));  
  transform-origin: 0 0;
  box-shadow: inset 0 0 0.1em 0.1em #00000050;
  border-radius: 2em;
}
.mac .bottom {
  width: var(--width);
  height: var(--deep);
  background-color: var(--colorBottom);
  position:absolute;
  transform: rotate3d(1, 0, 0, 90deg);  
  transform-origin: 0 0;
  box-shadow: inset 0 0 0.1em 0.1em #00000050;
}
.mac .front {  
  width: var(--width);
  height: var(--height);
  position:absolute;
  background-color: var(--colorFront);
  transform: translate3d(0 , 0 ,calc(var(--deep)*1));    
  
}

.mac .light {
    width: 0.5em;
    height: 0.5em;
    background-color: #2cfa03;
    margin: auto;
    margin-top: 1em;
    border-radius: 50%;
}
.mac .button {
  width: 2em;
  height: 2em;
  background-color: #444444;
  /* position:absolute; */
  margin: auto;
  margin-top: 2em;
  border-radius: 50%;
  box-shadow: inset 0 0 0.1em 0.1em #00000050, ;
  color: white;
  text-align: center;
}
.mac .usb {
  width: 2em;
  height: 1em;
  background-color: #6b6565;
  /* position:absolute; */
  margin: auto;
  margin-top: 1em;  
  
  box-shadow: inset 0 0 0.1em 0.1em #00000050, ;
  
}
.mac .usb::after {
  content: '';
  display: block;
  width: 1.5em;
  height: 0.3em;
  margin: auto;
  background-color: #312f2f;
  box-shadow: inset 0 0 0.1em 0.1em #00000050, ;
  
}

.mac .back {  
  width: var(--width);
  height: var(--height);
  position:absolute;
  background-color: var(--colorBack);
  box-shadow: inset 0 0 0.1em 0.1em #00000050;
}

.mac .left {    
  width: var(--deep);
  height: var(--height);
  position:absolute;  
  background-color: var(--colorLeft);
  transform: rotate3d(0, 1, 0, 90deg)translate3d( calc(var(--deep) * -1),0 ,0);
  transform-origin: 0 0;
  /*  */
}

.mac .right {    
  width: var(--deep);
  height: var(--height);
  position:absolute;  
  background-color: var(--colorRight);
  transform: rotate3d(0, 1, 0, 90deg)translate3d( calc(var(--deep) * -1),0 ,calc(var(--width) * 1));
  transform-origin: 0 0;
  /*  */
}

</style>